<template>
  <div class="collect">
    <!-- 标题 -->
    <div class="title">我的收藏</div>
    <!-- 列表 -->
    <div class="list">
      <router-link tag="div" :to="`/home/goods/detail?id=${item.id}`" class="item" v-for='item in list' :key='item.id'>
        <img :src="item.list_pic_url" alt="">
        <div class="name">{{item.name}}</div>
        <div class="price">￥{{item.retail_price}}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { listAction } from "@/api/my";
export default {
  data() {
    return {
      list: [], // 列表
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {
    // 获取收藏列表
    listAction({
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      console.log(res);
      this.list = res.data.collectGoodsList;
    });
  },
  // 准备
  mounted() {},
  // 方法
  methods: {},
};
</script>

<style lang='scss' scoped>
.collect {
  // 标题
  .title {
    padding: 10px 0;
    margin-bottom: 2.5px;
    font-size: 18px;
    font-weight: bolder;
    background-color: #fff;
  }
  // 列表
  .list {
    width: calc(100% - 10px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: calc(50% - 2.5px);
      padding-bottom: 5px;
      margin-bottom: 5px;
      background-color: #fff;
      img {
        width: 151px;
        height: 151px;
        margin: 0 auto;
        vertical-align: top;
      }
      .name {
        text-align: left;
        padding: 0 10px;
        margin: 12px auto 2.5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .price {
        text-align: left;
        padding: 0 10px;
        margin: 12px auto 2.5px;
        color: #9c3232;
      }
    }
  }
}
</style>